<style>
.cboxClose {
	background-color: #000;
	border: 2px solid #FFF;
	border-radius: 32px;
	color: #FFF;
	font-size: 21px;
	height: 28px;
	width: 28px;
	padding-bottom: 2px;
	margin-left: 0;
	right: -14px;
	top: -14px;
}

.widget-body .wysiwyg-editor {
	border-width: 1px !important;
}

.dropzone .dz-default.dz-message {
	background-image: none;
}

.dropzone {
	min-height: 120px;
}
</style>
<div id="zuhu_container">
	<div class="row">
		<div class="col-xs-12">
			<div id="search_box" class="widget-box  ui-sortable-handle collapsed">
				<div class="widget-header">
					<div class="nav-search" style="padding-top: 5px; right: 50px">
						<span class="input-icon"> <input type="text"
							id="commonQueryParam_name" i18n="xq.project.name"
							placeholder="租户标题" class="nav-search-input"> <i
							class="ace-icon fa fa-search nav-search-icon"
							onclick="$('#zuhuSearchBtn',$('#zuhu_container')).click()"></i>
						</span>
					</div>

					<div class="widget-toolbar">
						<a href="#" data-action="collapse"> <i
							class="1 ace-icon fa bigger-125 fa-chevron-up"></i>
						</a>
					</div>
				</div>
				<div class="widget-body" style="display: none;">
					<div class="widget-main">

						<div class="row">

							<div class="col-xs-12 col-sm-6 ">
								<div id="searchDiv" class="input-group col-xs-12  col-sm-6  "
									style="padding-bottom: 2px">
									<span class="input-group-btn">
										<button id="searchBtn" type="button"
											class="btn btn-purple btn-sm">
											<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
											<span i18n="find"></span>
										</button>
									</span>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>

			<table id="zuhu_grid-table"></table>

			<div id="zuhu_grid-pager"></div>

		</div>
		<!-- /.col -->
	</div>
	<!-- /.row -->


	<div id="zuhuModalDiv" class="modal fade" tabindex="-1"
		data-backdrop="static">
		<div class="modal-dialog" style="width: 1200px !important;">
			<div class="modal-content">
				<div class="modal-header no-padding">
					<div class="table-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">
							<span class="white">&times;</span>
						</button>
						<span i18n="xq.project"></span>
					</div>
				</div>
				<div class="modal-body"
					style="max-height: 750px; overflow-y: scroll;">
					<div id="modal-tip" class="red clearfix"></div>


					<form id="zuhuForm" name="zuhuForm"
						class="form-horizontal zuhuForm col-xs-12">


						<div class="widget-box  ui-sortable-handle">
							<div class="widget-header">
								<h4 class="widget-title">基本信息</h4>

							</div>

							<div class="widget-body">
								<div class="widget-main">

									<input type="hidden" name="id" id="id" /> <input type="hidden"
										name="xqContent" id="xqContent" /> <input type="hidden"
										name="files" id="files" />
									<div class="row" style="padding-bottom: 2px">
										<div class="form-group">
											<label class="col-xs-2 control-label"
												i18n="xq.project.name"></label>
											<div class="col-xs-7">
												<input type="text" class="form-control" id="name"
													name="name" />
											</div>
										</div>
									</div>

									<div class="row" style="padding-bottom: 2px">
										<div class="form-group"> 
											<label class="col-xs-2 control-label" i18n="xq.project.phone"></label>
											<div class="col-xs-7">												
													<input type="text"  class="form-control" id="phone"
														name="phone"
														placeholder="请输入联系电话" />											
											</div>
										</div>
									</div>

										
									<div class="row" style="padding-bottom: 2px">
													
										<div class="form-group"> 
											<label class="col-xs-2 control-label" i18n="xq.project.priType"></label>
											<div class="col-xs-7">		
															<select class="form-control" id="priType" name="priType" >																
																<option value="业主">业主</option>
																<option value="租户">租户</option>
															</select>
											</div>				
										</div>					
													
									</div>

								
							</div>
						</div>



						<div class="row" style="padding-bottom: 2px;">
							<div class="col-xs-12">
								<div class="widget-box  ui-sortable-handle">
									<div class="widget-header">
										<h4 class="widget-title">图片信息</h4>
										<div class="widget-toolbar">
											<a href="#" title="添加图片" data-action="settings"> <i
												class="1 ace-icon fa bigger-125  fa-cloud-upload fileinput-button"></i>
											</a>
										</div>
									</div>
									<div class="widget-body">
										<div class="widget-main">
											<div class="dropzone" id="dropzone"></div>
										</div>
									</div>
								</div>
							</div>
						</div>


					</form>
				</div>

				<div class="modal-footer no-margin-top">
					<div class="text-center">

						<button id="submizuhutBtn" class="btn btn-sm btn-primary">
							<i class="ace-icon fa fa-floppy-o"></i> <span i18n="save"></span>
						</button>

						<button class="btn btn-sm" data-dismiss="modal">
							<i class="ace-icon fa fa-share "></i> <span i18n="cancel"></span>
						</button>
					</div>
				</div>
			</div>
		</div>
		<!-- /.modal-content -->

		<div id="preview-template" style="display: none">
			<div class="dz-preview dz-file-preview">
				<div class="dz-details">
					<div class="dz-filename">
						<span data-dz-name></span>
					</div>
					<div class="dz-size" data-dz-size></div>
					<a id='' href='#' class="image-see" data-rel='colorbox'><img
						data-dz-thumbnail /> </a>
				</div>
				<div class="dz-progress">
					<span class="dz-upload" data-dz-uploadprogress></span>
				</div>
				<div class="dz-success-mark">
					<span>✔</span>
				</div>
				<div class="dz-error-mark">
					<span>✘</span>
				</div>
				<div class="dz-error-message">
					<span data-dz-errormessage></span>
				</div>
				<div class="center">
					<span data-dz-remove> <a href="#" data-action="delete"
						class="middle"> <i
							class="ace-icon fa fa-trash-o red bigger-130 middle"></i>
					</a>
					</span>
				</div>
			</div>
		</div>

	</div>
	<!-- /.modal-dialog -->
</div>
</div>



<script type="text/javascript">
    var scripts = [ null, "component/assets/js/jquery.hotkeys.js", "component/assets/js/bootstrap-tag.js", "component/assets/js/jquery.autosize.js", "component/assets/js/bootstrap-wysiwyg.js", "component/assets/js/ace/elements.wysiwyg.js",
	    "component/assets/js/dropzone.js", "component/assets/js/jquery.colorbox.js", null ];
    $('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	var $container = $('#zuhu_container');
	var grid_selector = "#zuhu_grid-table";
	var pager_selector = "#zuhu_grid-pager";
	var zuhuGrid = null;
	var $validateForm = null;
	var MDropzone = null;

	var $overflow = '';

	var colorbox_params = {
	    rel : 'colorbox',
	    reposition : true,
	    scalePhotos : true,
	    scrolling : false,
	    previous : '<i class="ace-icon fa fa-arrow-left"></i>',
	    next : '<i class="ace-icon fa fa-arrow-right"></i>',
	    close : '&times;',
	    current : '{current} of {total}',
	    maxWidth : '100%',
	    maxHeight : '88%',
	    onOpen : function() {
		$overflow = document.body.style.overflow;
		document.body.style.overflow = 'hidden';
	    },
	    onClosed : function() {
		document.body.style.overflow = $overflow;
	    },
	    onComplete : function() {
		$.colorbox.resize();
	    }
	};

	var lang = $.homeGlobal.LANG.replace('_', "-");
	var colNames;
	$.loy.i18n([ 'i18n/xq/xq_project' ], $.homeGlobal.LANG, $container, {
	    custCallback : function() { 
		$('input, textarea', $container).placeholder();
		colNames = [ ' ', $.i18n.prop("xq.project.name"),   $.i18n.prop("xq.project.priType"),   $.i18n.prop("xq.project.phone")  ]

		createWechatUserGrid();
	    }
	});

	function createWechatUserGrid() {

	    zuhuGrid = jQuery(grid_selector).loyGrid({
		url : 'xq/zuhu/page',
		datatype : "json",
		mtype : 'GET',
		colNames : colNames,
		colModel : [ {
		    name : 'myac',
		    index : '',
		    width : 70,
		    fixed : true,
		    sortable : false,
		    resize : false,
		    formatter : 'actions',
		    formatoptions : getFormatoptions('xq/zuhu/', 'zuhu')
		}, {
		    name : 'name',
		    index : 'name',
		    width : 100,
		    align : "left",
		    sortable : false,
		    editable : false
		}, {
		    name : 'priType',
		    index : 'priType',
		    width : 150,
		    align : "left",
		    sortable : true,
		    editable : false,		    
		} 
		, {
		    name : 'phone',
		    index : 'phone',
		    width : 150,
		    align : "left",
		    sortable : true,
		    editable : false,		    
		} ],
		height : getGridDefaultHeight(),
		pager : pager_selector,
		loadComplete : function(data) {
		    loadComplete(data);
		    var list = data.data ? data.data.content : null;
		    if (list) {
			for (var i = 0; i < list.length; i++) {
			    var editDivId = "jEditButton_" + list[i].id;
			    $('#' + editDivId, zuhuGrid).attr('onclick', '').on('click', function() {
				edit($(this).closest('tr').attr('id'));
			    });
			}
		    }
		}
	    }).loyGrid('navGrid', '#zuhu_grid-pager', {
		"baseUrl" : "xq/zuhu",
		"addfunc" : function() {
		    add();
		},
		"editfunc" : function(rowId) {
		    edit(rowId);
		},
		view : false
	    });
	    zuhuGrid.jqGrid('setFrozenColumns');
	}

	$validateForm = $('#zuhuForm', $container).validate({
	    onsubmit : false,
	    rules : {
		name : {
		    required : true,
		    maxlength : 15
		},
		jkShort : {
		    maxlength : 50
		},
		listShort : {
		    maxlength : 50
		},
	    }
	});

	function edit(rowId) {
	    clearForm();	    
	    $('#submizuhutBtn', $container).attr("url", "xq/zuhu/update");
	    $('#zuhuModalDiv', $container).modal("show");
	    $.loy.ajax({
		url : 'xq/zuhu/get',
		shade : false,
		data : {
		    id : rowId
		},
		success : function(data) {
			
		    var result = data.data;
		    $('#id', $container).val(result.id ? result.id : '');
		    $('#name', $container).val(result.name ? result.name : '');		    		    		   
		    $('#phone', $container).val(result.phone ? result.phone : '');
		    $('#priType', $container).val(result.priType ? result.priType : '');
 		    $('#xqContentEditor', $container).html(result.xqContent ? result.xqContent : '');

		    $.loy.ajax({
				url : "/sys/img/getFiles",
				showSuccess : false,
				type : 'GET',
				data : {
				    aId : result.id
				},
				success : function(data) {

			    $.each(data.data, function(index, item) {
				var mockFile = {
				    id : item.id,
				    name : item.medianame,
				    size : item.mediasize,
				    httpurl : item.httpurl
				};

				// Call the default addedfile event handler
				MDropzone.emit("addedfile", mockFile);
				// And optionally show the thumbnail of the file:
				MDropzone.emit("thumbnail", mockFile, item.httpurl);

			    });
			    $('.dropzone [data-rel="colorbox"]').colorbox(colorbox_params);
			}
		    });
		}
	    });
	}

	Dropzone.options.myAwesomeDropzone = false;

	function add() {

	    clearForm();
	    $('#id', $container).val('');
	    $('#submizuhutBtn', $container).attr("url", "/xq/zuhu/save");
	    $('#zuhuModalDiv', $container).modal("show");
	}

	function clearForm() {
	    $('#xqContentEditor').html('');
	    $('#name').val('');	    
	    $('#phone').val('');
	    $('#priType').val('');	
	    $('.dz-preview').remove(); 
	}
 

	$('#submizuhutBtn').click(function() {

	    if (!$validateForm.checkForm()) {
		$validateForm.defaultShowErrors();
		return;
	    }

	    var url = $(this).attr("url");
	    var fileIds = [];

	    $("#xqContent", $container).val($('#xqContentEditor').html());

	    $('.dropzone [data-rel="colorbox"]').map(function(k, v) {
		fileIds.push(v.id);
	    })

	    $("#files", $container).val(fileIds);

	    $.loy.ajax({
		url : url,
		showSuccess : false,
		data : $("#zuhuForm", $container).serialize(),
		success : function(data) {
		    var id = $('#id', $("#zuhuForm", $container)).val();
		    if (data.success) {
			$('#zuhuModalDiv', $container).modal("hide");

			zuhuGrid.trigger("reloadGrid");
		    }
		}
	    });
	});

	$('#xqContentEditor').ace_wysiwyg({
	    toolbar : [ 'font', null, 'fontSize', null, {
		name : 'bold',
		className : 'btn-info'
	    }, {
		name : 'italic',
		className : 'btn-info'
	    }, {
		name : 'strikethrough',
		className : 'btn-info'
	    }, {
		name : 'underline',
		className : 'btn-info'
	    }, null, {
		name : 'insertunorderedlist',
		className : 'btn-success'
	    }, {
		name : 'insertorderedlist',
		className : 'btn-success'
	    }, {
		name : 'outdent',
		className : 'btn-purple'
	    }, {
		name : 'indent',
		className : 'btn-purple'
	    }, null, {
		name : 'justifyleft',
		className : 'btn-primary'
	    }, {
		name : 'justifycenter',
		className : 'btn-primary'
	    }, {
		name : 'justifyright',
		className : 'btn-primary'
	    }, {
		name : 'justifyfull',
		className : 'btn-inverse'
	    }, null, {
		name : 'createLink',
		className : 'btn-pink'
	    }, {
		name : 'unlink',
		className : 'btn-pink'
	    }, null, {
		name : 'insertImage',
		className : 'btn-success'
	    }, null, 'foreColor', null ],
	    'wysiwyg' : {
		fileUploadError : showErrorAlert
	    }
	}).prev().addClass('wysiwyg-style2');

	if (typeof jQuery.ui !== 'undefined' && /applewebkit/.test(navigator.userAgent.toLowerCase())) {

	    var lastResizableImg = null;
	    function destroyResizable() {
		if (lastResizableImg == null)
		    return;
		lastResizableImg.resizable("destroy");
		lastResizableImg.removeData('resizable');
		lastResizableImg = null;
	    }

	    var enableImageResize = function() {
		$('.wysiwyg-editor').on('mousedown', function(e) {
		    var target = $(e.target);
		    if (e.target instanceof HTMLImageElement) {
			if (!target.data('resizable')) {
			    target.resizable({
				aspectRatio : e.target.width / e.target.height,
			    });
			    target.data('resizable', true);

			    if (lastResizableImg != null) {//disable previous resizable image
				lastResizableImg.resizable("destroy");
				lastResizableImg.removeData('resizable');
			    }
			    lastResizableImg = target;
			}
		    }
		}).on('click', function(e) {
		    if (lastResizableImg != null && !(e.target instanceof HTMLImageElement)) {
			destroyResizable();
		    }
		}).on('keydown', function() {
		    destroyResizable();
		});
	    }

	    enableImageResize();

	}

	function showErrorAlert(reason, detail) {
	    $.loy.alert('只能上传格式为 jpg/png/git 的文件!', 'error')
	}

	$('#commonQueryParam_name', $container).bind('keypress', function(event) {
	    if (event.keyCode == "13") {
		$('#searchBtn', $container).click();
	    }
	});

	$('.date-picker').datepicker({
	    autoclose : true,
	    todayHighlight : true,
	    language : 'zh-CN',
	    format : 'yyyy-mm-dd',

	})
	//show datepicker when clicking on the icon
	.next().on(ace.click_event, function() {
	    $(this).prev().focus();
	});

	//or change it into a date range picker
	$('.input-daterange').datepicker({
	    autoclose : true
	});

	var tag_input = $('#jkTag');
	
	try {
	    tag_input.tag({
			placeholder:tag_input.attr('placeholder'),
		   
	    });
	     

	} catch (e) {
	    //display a textarea for old IE, because it doesn't support this plugin or another one I tried!
	    tag_input.after('<textarea id="' + tag_input.attr('id') + '" name="' + tag_input.attr('name') + '" rows="3">' + tag_input.val() + '</textarea>').remove();
	    //$('#jkTag').autosize({append: "\n"});
	}

	Dropzone.autoDiscover = false;

	$("#dropzone").dropzone({
	    url : "/sys/img/upload", //必须填写
	    method : "post", //也可用put
	    paramName : "file", //默认为file 
	    headers : $.loy.token(),
	    maxFiles : 10,//一次性上传的文件数量上限
	    maxFilesize : 20, //MB
	    acceptedFiles : ".jpg,.gif,.png", //上传的类型  
	    dictDefaultMessage : "",
	    dictMaxFilesExceeded : "一次只能上传10张图片!",
	    addRemoveLinks : false,
	    clickable : ".fileinput-button", // 点击某个按钮或区域后出现选择电脑中本地图片，默认是previewsContainer指定的区域
	    previewTemplate : document.querySelector('#preview-template').innerHTML,//设置显示模板					    
	    init : function() {

		MDropzone = this;

		this.on("removedfile", function(file) {
		});

		this.on("addedfile", function(file) {
		    //上传文件时触发的事件
		    file.previewElement.querySelector('[data-rel]').setAttribute('id', file.id);
		    file.previewElement.querySelector('[data-rel]').setAttribute('href', file.httpurl);

		});

		this.on("queuecomplete", function() {
		    $('.dropzone [data-rel="colorbox"]').colorbox(colorbox_params);
		});

		this.on("success", function(file, data) {
		    //上传完成后触发的方法	    
		    file.previewElement.querySelector('[data-rel]').setAttribute('id', data.data.obj.id);
		    file.previewElement.querySelector('[data-rel]').setAttribute('href', data.data.obj.httpurl);

		});
		this.on("error", function(file, message) {
		    //this.removeFile(file);  
		    //$.loy.alert(message.data ? message.data.error : message,'error');	
		    $(file.previewElement).find('[data-dz-errormessage]').html(message.data ? message.data.error : message);
		});
	    }

	});

	$('textarea[class*=autosize]').autosize({
	    append : "\n"
	});

	$("#searchBtn", $container).click(function() {

	    var name = $("#commonQueryParam_name", $container).val();
	    var telNum = $("#commonQueryParam_telNum", $container).val();
	    var postData = {
		"name" : name,
		page : 0
	    };
	    zuhuGrid.loyGrid("setGridParam", {
		"postData" : postData
	    }).trigger("reloadGrid");

	});

    });
</script>